<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>费用修改控制</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="pageContentWhole">
      <a-card>
        <div class="card-title hasContent">集装箱订单费用修改控制</div>
        <a-row>
          <a-col :span="24">
            每月
            <a-select v-model="v1" style="margin: 0 5px; width: 100px;">
              <a-select-option v-for="k in 28" :key="k">{{k}}</a-select-option>
              <a-select-option key="0">不限制</a-select-option>
            </a-select>日截止费用修改
            <a-button type="primary" @click="save1">保存</a-button>
          </a-col>
        </a-row>
      </a-card>
    </div>
    <div class="pageContentWhole">
      <a-card>
        <div class="card-title hasContent">航次费用修改控制</div>
        <a-row>
          <a-col :span="24">
            每月
            <a-select v-model="v2" style="margin: 0 5px; width: 100px;">
              <a-select-option v-for="k in 28" :key="k">{{k}}</a-select-option>
              <a-select-option key="0">不限制</a-select-option>
            </a-select>日截止费用修改
            <a-button type="primary" @click="save2">保存</a-button>
          </a-col>
        </a-row>
      </a-card>
    </div>
    <div class="pageContentWhole">
      <a-card>
        <div class="card-title hasContent">陆运中心费用修改控制</div>
        <a-row>
          <a-col :span="24">
            每月
            <a-select v-model="v3" style="margin: 0 5px; width: 100px;">
              <a-select-option v-for="k in 28" :key="k">{{k}}</a-select-option>
              <a-select-option key="0">不限制</a-select-option>
            </a-select>日截止费用修改
            <a-button type="primary" @click="save3">保存</a-button>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>

<script>
import { editParams, queryParams } from '@/api/systemPersonnelManage'
export default {
  data () {
    return {
      id1: '',
      id2: '',
      id3: '',
      v1: '',
      v2: '',
      v3: ''
    }
  },
  methods: {
    save1 () {
      if (!this.$root._bc.editContainerOrderCost) {
        this.$message.error('您无此权限！')
        return
      }
      editParams({
        id: this.id1,
        value: this.v1
      }).then(rsp => {
        this.$message.success('保存成功')
      })
    },
    save2 () {
      if (!this.$root._bc.editVoyageCost) {
        this.$message.error('您无此权限！')
        return
      }
      editParams({
        id: this.id2,
        value: this.v2
      }).then(rsp => {
        this.$message.success('保存成功')
      })
    },
    save3 () {
      if (!this.$root._bc.editLandTransportationCenterCost) {
        this.$message.error('您无此权限！')
        return
      }
      editParams({
        id: this.id3,
        value: this.v3
      }).then(rsp => {
        this.$message.success('保存成功')
      })
    }
  },
  mounted () {
    queryParams({}).then(rsp => {
      const r3 = rsp.data
      if (r3 && r3.length === 3) {
        this.v1 = r3[0].value
        this.id1 = r3[0].id
        this.v2 = r3[1].value
        this.id2 = r3[1].id
        this.v3 = r3[2].value
        this.id3 = r3[2].id
      }
    })
  }
}
</script>

<style lang="less" scoped>
.ant-card {
  position: relative;
  margin-bottom: 24px;
  border: none;
  .cardEdit {
    position: absolute;
    right: 24px;
    top: 24px;
    z-index: 2;
  }
  .card-title {
    position: relative;
    padding-left: 16px;
    font-size: 18px;
    line-height: 1;
    color: #000;
    &:before {
      content: '';
      width: 5px;
      height: 18px;
      background: #1890ff;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: -1px;
    }
  }
  .hasContent {
    margin-bottom: 20px;
  }
}
</style>
